<template>
  <div class="user-management-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="main-title">用户管理</h1>
      <p class="header-desc">创建和管理用户资料，为穿搭推荐系统提供用户信息</p>
    </div>

    <!-- 主体内容区 -->
    <div class="page-content">
      <!-- 创建用户表单 -->
      <div class="create-user-section">
        <h2 class="section-title">创建新用户</h2>
        <el-form
          ref="userFormRef"
          :model="userForm"
          :rules="userRules"
          label-width="100px"
          class="user-form"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" placeholder="请输入用户名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="userForm.gender" placeholder="请选择性别" style="width: 100%">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input-number
                  v-model="userForm.age"
                  :min="1"
                  :max="120"
                  placeholder="请输入年龄"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身高(cm)" prop="height">
                <el-input-number
                  v-model="userForm.height"
                  :min="100"
                  :max="250"
                  :precision="1"
                  placeholder="请输入身高"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="体重(kg)" prop="weight">
                <el-input-number
                  v-model="userForm.weight"
                  :min="20"
                  :max="200"
                  :precision="1"
                  placeholder="请输入体重"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爱好" prop="hobby">
                <el-input
                  v-model="userForm.hobby"
                  placeholder="请输入爱好，多个爱好用逗号分隔"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="行为习惯" prop="behavior_habit">
            <el-input
              v-model="userForm.behavior_habit"
              type="textarea"
              :rows="3"
              placeholder="请描述您的日常行为习惯，如工作性质、运动习惯等"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleCreateUser" :loading="isCreating">
              创建用户
            </el-button>
            <el-button @click="resetForm">重置表单</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 用户列表 -->
      <div class="user-list-section">
        <h2 class="section-title">用户列表</h2>
        <el-table :data="userList" border style="width: 100%">
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="gender" label="性别" width="80" />
          <el-table-column prop="age" label="年龄" width="80" />
          <el-table-column prop="height" label="身高(cm)" width="100" />
          <el-table-column prop="weight" label="体重(kg)" width="100" />
          <el-table-column prop="hobby" label="爱好" />
          <el-table-column prop="behavior_habit" label="行为习惯" show-overflow-tooltip />
          <el-table-column prop="created_at" label="创建时间" width="150" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="goToRecommend(scope.row.username)"
              >
                去推荐
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDeleteUser(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { createUser } from '../api/outfitApi'

const router = useRouter()

// 响应式数据
const userFormRef = ref(null)
const isCreating = ref(false)
const userList = ref([])

// 用户表单数据
const userForm = ref({
  username: '',
  gender: '',
  age: null,
  height: null,
  weight: null,
  hobby: '',
  behavior_habit: ''
})

// 表单验证规则
const userRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  height: [
    { required: true, message: '请输入身高', trigger: 'blur' }
  ],
  weight: [
    { required: true, message: '请输入体重', trigger: 'blur' }
  ],
  hobby: [
    { required: true, message: '请输入爱好', trigger: 'blur' }
  ],
  behavior_habit: [
    { required: true, message: '请输入行为习惯', trigger: 'blur' }
  ]
}

// 创建用户
const handleCreateUser = async () => {
  try {
    await userFormRef.value.validate()
    
    isCreating.value = true
    await createUser(userForm.value)
    
    ElMessage.success('用户创建成功！')
    resetForm()
    // 这里可以刷新用户列表
  } catch (error) {
    ElMessage.error(error.message || '创建用户失败')
  } finally {
    isCreating.value = false
  }
}

// 重置表单
const resetForm = () => {
  userFormRef.value?.resetFields()
  userForm.value = {
    username: '',
    gender: '',
    age: null,
    height: null,
    weight: null,
    hobby: '',
    behavior_habit: ''
  }
}

// 跳转到推荐页面
const goToRecommend = (username) => {
  router.push(`/?username=${username}`)
}

// 删除用户
const handleDeleteUser = async (userId) => {
  try {
    await ElMessageBox.confirm('确定要删除这个用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 这里可以调用删除用户的API
    ElMessage.success('用户删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除用户失败')
    }
  }
}

// 页面初始化
onMounted(() => {
  // 这里可以加载用户列表
})
</script>

<style scoped>
.user-management-page {
  min-height: 100vh;
  padding: 24px;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 24px;
}

.main-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.header-desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.create-user-section,
.user-list-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.user-form {
  max-width: 800px;
}

@media (max-width: 768px) {
  .user-management-page {
    padding: 12px;
  }
  
  .create-user-section,
  .user-list-section {
    padding: 16px;
  }
}
</style>
